<template>
  <div class="stepschild1_container">
    <div class="from_box">
      <el-config-provider :locale="zhCn">
        <!-- 关联专题 -->
        <div class="from_init">
          <p>关联专题：</p>
          <!-- Transfer 穿梭框 --- 可搜索过滤 -->
          <el-transfer v-model="value" :data="data" :titles="['待选择', '已选择']" filterable :filter-method="filterMethod"
            filter-placeholder="请输入专题名称" />
        </div>
        <!-- 关联优选 -->
        <div class="from_init">
          <p>关联优选：</p>
          <!-- Transfer 穿梭框 --- 可搜索过滤 -->
          <el-transfer v-if="subData.length > 0" v-model="value1" :data="subData" :titles="['待选择', '已选择']" filterable
            :filter-method="filterMethod" filter-placeholder="请输入优选名称" />
        </div>
      </el-config-provider>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiGetSubjectList, ApiPrefrenceAreaList } from '@/http/pms/api'

// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ref, onMounted, computed, watch } from 'vue';

// interface Option {
//   key: number
//   lable: string
// }

const data = ref<any[]>([]);
const subData = ref<any[]>([]);

const props = defineProps(
  {
    active: {
      type: Number,
      default: 0,
      required: true
    }
  }
)

const ac = computed(() => {
  return props.active
})

// 监听 active 的变化
watch((ac), (newVal, oldVal) => {
  console.log(newVal, oldVal);
  // 等到active 变成3再请求数据
  if (newVal === 3) {
    getData()
  }
})

onMounted(() => {
  console.log(1234567890);
})

const getData = () => {
  // 请求接口数据 --- 商品专题管理 --- /subject/listAll，获取全部商品专题
  ApiGetSubjectList().then(res => {
    // console.log('商品专题管理', res);
    if (res.code === 200) {
      res.data.forEach((item: any) => {
        data.value.push({
          key: item.id,
          label: item.title
        })
      })
    }
  })

  // 请求接口数据 --- 商品优选管理 --- /prefrenceArea/listAll,获取所有商品优选,拿到的是关联优选
  ApiPrefrenceAreaList().then(res => {
    // console.log('商品优选管理', res);
    if (res.code === 200) {
      res.data.forEach((item: any) => {
        subData.value.push({
          key: item.id,
          label: item.name
        })
      })
    }
  })

}


const value = ref([])
const value1 = ref([])

const filterMethod = (query: any, item: any) => {
  // return item.initial.toLowerCase().includes(query.toLowerCase())
  return item.label.includes(query);
}

// 将子组件表单数据暴露
defineExpose({
  data,
  subData,
  value,
  value1
})

</script>

<style lang="less" scoped>
.stepschild1_container {
  display: flex;
  flex-direction: column;

  .from_box {
    margin-top: 60px;

    .from_init {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;

      p {
        font-size: 14px;
        color: #606266;
        margin-right: 10px;
      }
    }
  }
}

:deep(.el-input__wrapper) {
  border-radius: 20px !important;
}
</style>